<html>

	<script src="../../jquery/jquery-1.6.2.min.js"></script>
	<script src="../../jquery/jquery-ui-1.8.16.custom.min.js"></script>
		
	<style>
	#draggable, #draggable2 { width: 100px; height: 100px; padding: 0.5em; float: left; margin: 10px 10px 10px 0; }
	#droppable { width: 150px; height: 150px; padding: 0.5em; float: left; margin: 10px; }
	</style>
	<script>
	$(function() {
		$( "#draggable" ).draggable({ revert: "valid" });
		$( "#draggable2" ).draggable({ revert: "invalid" });

		$( "#droppable" ).droppable({
			activeClass: "ui-state-hover",
			hoverClass: "ui-state-active",
			drop: function( event, ui ) {
				//alert(ui.draggable.html());
				var codeElement = ui.draggable.find("code");
				
				$( this ).html( codeElement.html());
			}
		});
	});
	</script>



<div class="demo">
	
<div id="draggable" class="ui-widget-content">
	Text<div style="display: none;"><code><input type="text"/></code></div>
</div>

<div id="draggable2" class="ui-widget-content">
	<p>I revert when I'm not dropped</p>
</div>

<div id="droppable" class="ui-widget-header">

</div>

</div><!-- End demo -->




</html>